<template>
  <div role="tabpanel" class="tab-panel active" id="Message">
    <ul class="list-group" v-for="item in messages" :key="item.id">
        <li class="list-group-item" >
            <!-- 路由传参 -->
            <!-- 1. params传参 占路径一部分 ?前面 -->
            <!-- 2. query传参  key=value&key1=value1 ?后面 -->
            <!-- to 可以写字符串 也可以写对象    传参记得写 :to     -->

            <!-- 
                params注意点:
                1.传递params参数时 如果不特殊处理会被当作路径解析 必须在这个路由的path属性中去特殊处理
                2.如果传递params参数 使用的是to对象写法 那么必须使用name  不能使用path
                3.params参数 默认是必传的 如果不传 1.浏览器报警告 2.地址不对 3.高亮状态也不对  参数后面加？ 表示这个参数可传可不传
            -->

            <!-- <router-link :to="`/home/message/msgdetail/${item.id}?content=${item.content}`">{{item.content}}</router-link> -->
            
            <router-link :to="{name:'msgdetail',params:{id:item.id},query:{content:item.content}}">{{item.content}}</router-link>
            <!-- to写对象，不可以用path 要用name -->
            <!-- <router-link :to="{path:'/home/message/msgdetail',params:{id:item.id},query:{content:item.content}}">{{item.content}}</router-link> -->

            <!-- 不传query参数  可以 不展示不报错-->
            <!-- <router-link :to="{name:'msgdetail',params:{id:item.id}}">{{item.content}}</router-link> -->

            <!-- 不传params参数 默认params参数必传-->
            <!-- 
                params参数 默认是必传的 如果不传 1.浏览器报警告 2.地址不对 3.高亮状态也不对  
                在占位时参数后面加？ 表示这个参数可传可不传
             -->
            <!-- <router-link :to="{name:'msgdetail',query:{content:item.content}}">{{item.content}}</router-link> -->

        </li>
    </ul>
    <div class="alert alert-success" role="alert">
        <!-- 三级路由 -->
        <router-view></router-view>
    </div>
</div>
</template>

<script>
export default {
  name: 'Message',
  data(){
    return {
        messages:[
            {id:1,content:'学习'},
            {id:2,content:'吃饭'},
            {id:3,content:'睡觉'},

        ]
    }
  }
}
</script>

<style scoped>

</style>
